<!-- 从业者-我的-学习管理 -->
<template>
	<view class="recruitment-container">
		<!-- 我的题库 -->
		<view class="card-question">
			<view class="question-title">
				<text class="job-item">题库练习/模拟考</text>
				<!-- <text class="job-item">开放时间：2025-12-12</text> -->
			</view>
			<view class="question-content" @click="shoucang(0)">
				<view class="content-item">
					<text class="job-item">{{studyForm.soucangcount}}</text>
					<text class="job-item">我的收藏</text>
				</view>
				<view class="content-item" @click="cuotiji(1)">
					<text class="job-item">{{studyForm.errorcount}}</text>
					<text class="job-item">错题集</text>
				</view>
				<view class="content-item" @click="studyRecord(2)">
					<text class="job-item">{{studyForm.studycount}}</text>
					<text class="job-item">练习记录</text>
				</view>
			</view>
		</view>
		<!-- 顶部标签栏 -->
		<u-tabs :list="tabs" :current="currentTab" @change="tabChange" active-color="#2979ff" inactive-color="#666"
			bar-width="120" :bold="true" :font-size="32"></u-tabs>

		<!-- 内容区域 -->
		<view class="content">
			<!-- 招聘列表 -->
			<view v-if="courseList.length > 0">
				<view v-for="(course, index) in courseList" :key="index" class="job-card" @click="recordDetails">
					<view class="card-top">
						<!--左边证书图片 -->
						<view class="card-left">
							<view class="job-image">
								<u-image width="60px" height="80px" src="/static/nav/nav-classify.png"></u-image>
							</view>
						</view>
						<!-- 右边文字 -->
						<view class="card-right">
							<view class="job-info">
								<text class="job-item">{{ course.bc_name }}</text>
							</view>
							<view class="job-info">
								<!-- <text class="job-item">截止时间：{{ course.create_time }}</text> -->
							</view>
							<view class="job-info">
								<!-- <text class="job-item">报考等级：{{ job.level }}</text> -->
							</view>
							<view class="job-info">
								<text class="job-item">{{ course.bc_tolzj }}节</text>
								<text class="job-line">|</text>
								<text class="job-salary">已学：{{ course.cycs_jindu ? course.cycs_jindu : 0 }}%</text>
							</view>
						</view>
					</view>
					<!-- 					<view class="job-actions">
						<template v-if="job.status === 'SigningUp'">
							<u-button type="default" size="medium" shape="circle" plain :custom-style="customStyle" @click="editJob(job.id)">
								完成资料
							</u-button>
							<u-button type="default" size="medium" shape="circle" plain @click="recordDetails(job.id)">
								详情
							</u-button>
						</template>
						<template v-else-if="job.status === 'review'">
							<u-button type="default" size="medium" shape="circle" plain @click="recordDetails(job.id)">
								详情
							</u-button>
						</template>
						<template v-else>
							<u-button type="default" size="medium " shape="circle" plain @click="recordDetails(job.id)">
								详情
							</u-button>
						</template>
					</view> -->
				</view>
			</view>

			<!-- 空状态 -->
			<u-empty v-else mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" text="您还未发布招聘信息"
				margin-top="100"></u-empty>
		</view>

		<!-- 发布按钮 -->
		<!-- 		<view class="publish-btn">
			<u-button type="primary" shape="circle" @click="createJob">
				发布新岗位
			</u-button>
		</view> -->

	</view>
</template>

<script>
	import { toInteger } from 'lodash';
import DialNav from '@/components/nav/dial-nav.vue';
	export default {
		components: {
			DialNav
		},
		data() {
			return {
				// 题库练习
				studyForm: {
					errorcount:0,
					soucangcount:0,
					studycount:0
				},
				favorite: 0,
				mistakes: 0,
				record: 0,
				currentTab: 1, // 默认选中"我的招聘"completed: '10%'
				// tabs页
				currentTab: 0,
				tabs: [{
						name: '我的课程'
					},
					// {
					// 	name: '历史记录'
					// },
				],
				// 报名中：SigningUp， 待支付：unpaid， 已支付：paid ，报名成功:  registSuccess
				courseList: [{
						id: 1,
						image: '/static/nav/nav-classify.png',
						title: '考试名称',
						endTime: '2025-05-23',
						level: '四级',
						status: 'SigningUp',
						sum: 45,
						completed: '10%'
					},
					{
						id: 2,
						image: '/static/nav/nav-classify.png',
						title: '考试名称1',
						endTime: '2025-05-23',
						level: '一级',
						status: 'SigningUp',
						sum: 23,
						completed: '10%'
					},
					{
						id: 3,
						image: '/static/nav/nav-classify.png',
						title: '考试名称1',
						endTime: '2025-05-23',
						level: '一级',
						status: 'SigningUp',
						sum: 23,
						completed: '10%'
					}
				],
				// 按钮组中的样式写法
				customStyle: {
					marginRight: '20rpx',
					// margin-right: 20rpx;

				},
			}
		},
		computed: {
			// 按条件过滤是否发布的条件
			filteredJobs() {
				if (this.currentTab === 1) {
					return this.courseList.filter(job => job.status === 'SigningUp');
				} else if (this.currentTab === 2) {
					return this.courseList.filter(job => job.status === 'unpaid');
				}
				return this.courseList;
			}
		},
		onShow() {
			// 获取总数
			this.selectStudyCount()
			// 获取从业者报名学习的在线课程 
			this.selectOnlineCourse()
		},
		methods: {
			selectStudyCount() {
				this.$u.api.querystudycount({
					"usercode": uni.getStorageSync('usercode')
				}).then(res =>{
					console.log('count:', res)
					this.studyForm = res.data.base_info
				})
			},
			// 获取从业者报名学习的在线课程 
			selectOnlineCourse() {
				this.$u.api.querybcstudylist({
					"usercode": uni.getStorageSync('usercode')
				}).then(res =>{ 
					console.log('online:', res)
					this.courseList = res.data.base_info
					this.getLearned()
				})
			},
			
			// 已经学习的总体进度
			getLearned() {
				console.log('online-2:', this.courseList)
				let sumlearned = 0
				for(let i=0; i< this.courseList.length; i++) {
					sumlearned = 0
					for(let j=0; j< this.courseList[i].xxinfo.length; j++) {
						sumlearned += toInteger(this.courseList[i].xxinfo[j].cycsd_jindu) 
					}
					// sumlearned += toInteger(this.courseList[i].cycsd_jindu)
					this.courseList[i].cycs_jindu = sumlearned
				}
				// this.learned = sumlearned/this.jieshu ? sumlearned/this.jieshu : 0
				console.log('online-1:', this.courseList)
			},
			
			// 收藏集
			shoucang(datatype) {
				uni.navigateTo({
					url: `/pages/Practitioner/question/simulationMistakes?datatype=${datatype}`
				});
			},
			
			// 错题集
			cuotiji(datatype) {
				uni.navigateTo({
					url: `/pages/Practitioner/question/simulationMistakes?datatype=${datatype}`
				});
			},
			
			// 学习记录
			studyRecord(datatype) {
				uni.navigateTo({
					url: `/pages/Practitioner/studyManage/studyRecord?datatype=${datatype}`
				});
			},
			
			tabChange(index) {
				this.currentTab = index;
			},
			createJob() {
				uni.navigateTo({
					url: '/pages/recruitment/create'
				});
			},
			// 带参数的页面跳转
			editJob(id) {
				uni.navigateTo({
					url: `/pages/recruitment/edit?id=${id}`
				});
			},
			// 跳转到报名详情页面
			recordDetails(id) {
				// console.log('查看详情',id)
				uni.navigateTo({
					url: `/pages/Practitioner/examination/examinationDetails?id=${id}`
				});
			},
			deleteJob(id) {
				uni.showModal({
					title: '提示',
					content: '确定删除该招聘信息吗？',
					success: (res) => {
						if (res.confirm) {
							this.jobList = this.jobList.filter(job => job.id !== id);
							uni.showToast({
								title: '删除成功',
								icon: 'success'
							});
						}
					}
				});
			},
			publishJob(id) {
				const job = this.jobList.find(job => job.id === id);
				if (job) {
					job.status = 'published';
					job.statusText = '已发布';
					uni.showToast({
						title: '发布成功',
						icon: 'success'
					});
				}
			},
			unpublishJob(id) {
				const job = this.jobList.find(job => job.id === id);
				if (job) {
					job.status = 'draft';
					job.statusText = '未发布';
					uni.showToast({
						title: '已下架',
						icon: 'success'
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.recruitment-container {
		// height: 100vh;
		// display: flex;
		// flex-direction: column;
		background-color: #f5f5f5;

		/deep/ .u-tabs {
			background-color: #fff;
			box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.1);
			margin: 0 10px;
			border-radius: 12rpx;
		}

		// 练习题库
		.card-question {
			background-color: #fff;
			border-radius: 12rpx;
			padding: 30rpx;
			margin: 10px;


			.question-title {
				display: flex;
				justify-content: space-between;
			}

			.question-content {
				
				display: flex;
				justify-content: space-between;
				margin: 10px 0;
				
				.content-item {
					display: flex;
					flex-direction: column;
					text-align: center;
					background-color: #e3e3e3;
					border-radius: 12rpx;
					padding: 30rpx 50rpx;
					
				}
				

			}


		}


		.content {
			// flex: 1;
			overflow-y: auto;
			margin: 10px;
			// padding: 10rpx;

			.job-card {
				background-color: #fff;
				border-radius: 12rpx;
				padding: 30rpx;
				margin-bottom: 20rpx;

				.job-line {
					margin: 0 10px;
				}


				.job-salary {
					font-size: 28rpx;
					color: #ff6a00;
					font-weight: bold;
				}

				.card-top {
					display: flex;
					// border-bottom: 1px solid #dfdfdf;
					// margin-bottom: 20px;
				}

				.card-left {
					width: 60px;
					height: 80px;
					margin-right: 20px;
				}


				.job-info {
					display: flex;
					align-items: center;
					margin-bottom: 20rpx;
					font-size: 26rpx;
					color: #666;

					.info-item {
						margin-right: 15rpx;


						&:last-child {
							margin-right: 0;
						}
					}

				}


				.job-meta {
					display: flex;
					justify-content: space-between;
					font-size: 24rpx;
					color: #999;
					margin-bottom: 30rpx;
					// border-bottom: 1px solid #dfdfdf;
					padding-bottom: 15rpx;

					.status {
						font-weight: bold;

						&.status-published {
							color: #19be6b;
						}

						&.status-draft {
							color: #ff9900;
						}
					}
				}

				.job-actions {
					// display: flex;
					// justify-content: flex-end;
					text-align: right;
				}
			}
		}

		.publish-btn {
			padding: 20rpx;
			background-color: #fff;
			border-top: 1rpx solid #eee;
		}
	}
</style>